Jassif Team Institution

Angular HttpClient மாட்யூல்

Angular HttpClient மாட்யூல் ஒரு சக்திவாய்ந்த HTTP கிளையண்ட் API-ஐ வழங்குகிறது, இது Angular பயன்பாடுகளுக்குள் வெளிப்புற HTTP சேவைகளுடன் தொடர்பு கொள்ள பயன்படுத்தப்படுகிறது. இது XMLHttpRequest API-க்கு மேலாக அதிக செயல்திறன் மற்றும் சிறந்த பிழைக் கையாளுதலுடன் ஒரு எளிமையான வழியை வழங்குகிறது.

HttpClient கிளாஸ் GET, POST, PUT, DELETE மற்றும் பிற HTTP முறைகளை ஆதரிக்கிறது. இது Observables ஐப் பயன்படுத்தி எதிர்வினை நிரலாக்கத்தை ஆதரிக்கிறது, இது வலுவான பிழைக் கையாளுதல், ரத்து செய்யும் திறன் மற்றும் பல HTTP கோரிக்கைகளை இணைக்கும் திறன் ஆகியவற்றை வழங்குகிறது.

HTTP அடிப்படைகள்

கிளையண்ட்: JSON தரவைப் பெறவும் அனுப்பவும் HttpClient பயன்படுத்தவும்.

Observables: HTTP முறைகள் Observables வழங்குகின்றன. subscribe() அல்லது async pipe பயன்படுத்தவும்.

பயனர் அனுபவம்: ஏற்றுதல் காட்டவும் மற்றும் தெளிவான பிழை செய்திகள் வழங்கவும்.

ஒரு முறை வழங்கவும்: bootstrap-இல் provideHttpClient() பதிவு செய்யவும்.

import { provideHttpClient, HttpClient } from '@angular/common/http';

// Bootstrap
// bootstrapApplication(App, { providers: [provideHttpClient()] });

// Use in a component
// http.get<User[]>('/api/users').subscribe({ அடுத்தது: d => users = d });

GET கோரிக்கைகள்

http.get<T>() முறையைப் பயன்படுத்தி தரவைப் பெறவும்.

பயனர் அனுபவத்திற்காக ஏற்றுதல் மற்றும் பிழை நிலையைக் கண்காணிக்கவும்.

சந்தாவுக்குள் கூறு நிலையைப் புதுப்பிக்கவும்.

loading = true; error = '';
http.get<User[]>('/api/users').subscribe({
  அடுத்தது: d => { users = d; loading = false; },
  error: () => { error = 'Failed to load'; loading = false; }
});

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { provideHttpClient, HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h3>HttpClient</h3>
    <button (click)="load()">Load Users</button>
    <p *ngIf="loading">Loading...</p>
    <p *ngIf="error" style="color:crimson">{{ error }}</p>
    <ul>
      <li *ngFor="let u of users">{{ u.name }} ({{ u.email }})</li>
    </ul>
  `
})
export class App {
  http = inject(HttpClient);
  users: any[] = [];
  loading = false;
  error = '';

  load() {
    this.loading = true;
    this.error = '';
    this.http.get<any[]>('https://jsonplaceholder.typicode.com/users')
      .subscribe({
        அடுத்தது: (data) => { this.users = data; this.loading = false; },
        error: () => { this.error = 'Failed to load users'; this.loading = false; }
      });
  }
}

bootstrapApplication(App, { providers: [provideHttpClient()] });

POST கோரிக்கைகள்

http.post<T>() முறையைப் பயன்படுத்தி புதிய தரவை உருவாக்கவும்.

நகல்களைத் தடுக்க அனுப்பும் போது பொத்தானை முடக்கவும்.

திரும்பப் பெறப்பட்ட முடிவு அல்லது பிழை செய்தியை வழங்கவும்.

loading = true; error = ''; result = null;
http.post<Post>('/api/posts', { title, body }).subscribe({
  அடுத்தது: r => { result = r; loading = false; },
  error: () => { error = 'Failed to create'; loading = false; }
});

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { provideHttpClient, HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h3>HttpClient POST</h3>
    <button (click)="createPost()" [disabled]="loading">Create Post</button>
    <p *ngIf="loading">Sending...</p>
    <p *ngIf="error" style="color:crimson">{{ error }}</p>
    <div *ngIf="result">
      <p>Created Post ID: {{ result.id }}</p>
      <p>Title: {{ result.title }}</p>
    </div>
  `
})
export class App {
  http = inject(HttpClient);
  loading = false;
  error = '';
  result: any = null;

  createPost() {
    this.loading = true;
    this.error = '';
    this.result = null;
    this.http.post<any>('https://jsonplaceholder.typicode.com/posts', {
      title: 'foo',
      body: 'bar',
      userId: 1
    }).subscribe({
      அடுத்தது: (res) => { this.result = res; this.loading = false; },
      error: () => { this.error = 'Failed to create post'; this.loading = false; }
    });
  }
}

bootstrapApplication(App, { providers: [provideHttpClient()] });

பிழைக் கையாளுதல்

எப்போதும் ஒரு உதவியான பிழை செய்தியைக் காட்டவும் மற்றும் மீண்டும் முயற்சிக்க பயனரை அனுமதிக்கவும்.

மீண்டும் முயற்சி vs விரைவாகத் தோல்வியுறுவதை முடிவு செய்ய நிலை குறியீடுகளைச் சரிபார்க்கவும்.

பயனர் இடைமுகத்தை ஏற்றுதல் நிலையுடன் பதிலளிக்கும் வகையில் வைத்திருங்கள்.

error = ''; loading = true;
http.get('/api/data').subscribe({
  அடுத்தது: r => { data = r; loading = false; },
  error: err => { error = `Request failed (status ${'{'}err?.status ?? 'unknown'{}})`; loading = false; }
});

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { provideHttpClient, HttpClient, withInterceptors, HttpResponse, HttpErrorResponse, HttpRequest, HttpHandlerFn } from '@angular/common/http';
import { of, throwError } from 'rxjs';

// Fake HTTP interceptor so the demo works without external network calls
function mockHttp(req: HttpRequest<any>, அடுத்தது: HttpHandlerFn) {
  if (req.method === 'GET' && req.url.includes('jsonplaceholder.typicode.com/usersx')) {
    return throwError(() => new HttpErrorResponse({ status: 404, statusText: 'Not Found', url: req.url }));
  }
  if (req.method === 'GET' && req.url.includes('jsonplaceholder.typicode.com/users')) {
    const body = [
      { id: 1, name: 'Leanne Graham', email: 'leanne@example.com' },
      { id: 2, name: 'Ervin Howell', email: 'ervin@example.com' }
    ];
    return of(new HttpResponse({ status: 200, body }));
  }
  return அடுத்தது(req);
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  styles: [`
    button { margin-right: 8px; }
    .error { color: crimson; }
    .ok { color: seagreen; }
  `],
  template: `
    <h3>HTTP Error Handling</h3>

    <div>
      <button (click)="loadOk()" [disabled]="loading">Load OK</button>
      <button (click)="loadFail()" [disabled]="loading">Load Fail</button>
      <button (click)="retry()" [disabled]="!lastAction || loading">Retry</button>
    </div>

    <p *ngIf="loading">Loading...</p>
    <p *ngIf="error" class="error">{{ error }}</p>
    <p *ngIf="!error && data" class="ok">Loaded {{ isArray(data) ? data.length + ' items' : '1 item' }}</p>

    <ul *ngIf="isArray(data)">
      <li *ngFor="let u of data">{{ u.name }} ({{ u.email }})</li>
    </ul>
  `
})
export class App {
  http = inject(HttpClient);
  loading = false;
  error = '';
  data: any[] | null = null;
  lastAction = '';
  isArray(value: unknown): value is any[] { return Array.isArray(value as any); }

  fetch(url: string): void {
    this.loading = true;
    this.error = '';
    this.data = null;
    this.http.get<any[]>(url).subscribe({
      அடுத்தது: (res) => { this.data = res; this.loading = false; },
      error: (err) => {
        const status = err?.status ?? 'unknown';
        this.error = `Request failed (status ${status}). Please try again.`;
        this.loading = false;
      }
    });
  }

  loadOk() {
    this.lastAction = 'ok';
    this.fetch('https://jsonplaceholder.typicode.com/users');
  }

  loadFail() {
    this.lastAction = 'fail';
    this.fetch('https://jsonplaceholder.typicode.com/usersx');
  }

  retry() {
    if (this.lastAction === 'ok') this.loadOk();
    else if (this.lastAction === 'fail') this.loadFail();
  }
}

bootstrapApplication(App, { providers: [provideHttpClient(withInterceptors([mockHttp]))] });

HTTP Interceptors

ஒவ்வொரு HTTP கோரிக்கை/பதிலிலும் குறுக்கு-வெட்டு தர்க்கத்தை இயக்கவும் (எ.கா., authentication headers, logging).

provideHttpClient(...) உடன் bootstrap-இல் ஒரு முறை பதிவு செய்யவும்.

import { HttpInterceptorFn, provideHttpClient, withInterceptors } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, அடுத்தது) => {
  const cloned = req.clone({ setHeaders: { Authorization: 'Bearer TOKEN' } });
  return அடுத்தது(cloned);
};

bootstrapApplication(App, {
  providers: [provideHttpClient(withInterceptors([authInterceptor]))]
});

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { provideHttpClient, withInterceptors } from '@angular/common/http';

@Component({ selector: 'app-root', standalone: true, template: `<p>Interceptors demo</p>` })
export class App {}

bootstrapApplication(App, {
  providers: [provideHttpClient(withInterceptors([]))]
});

HTTP முறைகள் ஒப்பீடு

HttpClient வினாடி வினா